<template>
  <div
    id="safe-echarts1"
    style="width: 100%; height: 100%; pointer-events: all"
  ></div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [],
    };
  },
  mounted() {
    this.getData();
  },
  created() {},
  methods: {
    // 获取数据
    getData() {
      this.$get("/humanresources/getLicenseName").then((res) => {
        this.dataList = res.data;
        this.renderEcharts(res.data);
      });
    },
    // 渲染饼图
    renderEcharts(datas) {
      let myChart = this.$echarts.init(
        document.getElementById("safe-echarts1")
      );
      var scaleData = [
        {
          name: "制造业 4",
          value: 4,
          radius1: ["56%", "58%"],
          radius2: "55%",
        },
        {
          name: "建筑业 3",
          value: 3,
          radius1: ["69%", "71%"],
          radius2: "68%",
        },
        {
          name: "科学研究 5",
          value: 5,
          radius1: ["81%", "83%"],
          radius2: "80%",
        }
      ];
      var placeHolderStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      };
      var seriesObj = [];
      let total = 0;

      var color = ["#FF647C", "#FFBE75", "#6C77FD"]; // , "#3EE2A5"
      for (var i = 0; i < scaleData.length; i++) {
        total += parseInt(scaleData[i].value)

        seriesObj.push(
          {
            name: "",
            type: "pie",
            radius: scaleData[i].radius1,
            center: ["60%", "50%"],
            hoverAnimation: true,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  color: "#ddd",
                },
              },
            },
            data: [
              {
                value: scaleData[i].value,
                name: scaleData[i].name,
                itemStyle: {
                  normal: {
                    borderWidth: 5,
                    borderColor: color[i],
                  },
                },
              },
              {
                value: 12,
                name: "",
                itemStyle: placeHolderStyle,
              },
            ],
          },
          {
            name: "",
            type: "gauge",
            detail: false,
            splitNumber: 10, //刻度数量
            radius: scaleData[i].radius2, //图表尺寸
            center: ["60%", "50%"],
            startAngle: 0, // 开始刻度的角度
            endAngle: -356, // 结束刻度的角度
            axisLine: {
              show: false,
              lineStyle: {
                width: 0,
                shadowBlur: 0,
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "rgba(220,220,220,0.5)",
                width: 5,
              },
              length: 5,
              splitNumber: 5,
            },
            splitLine: {
              show: false,
              length: 5,
              lineStyle: {
                color: "rgba(220,220,220,0.1)",
              },
            },
            axisLabel: {
              show: false,
            },
          }
        );
      }
      let option = {
        color: color,
        title: {
          text: total,
          top: '45%',
          textAlign: "center",
          left: "58%",
          textStyle: {
            color: '#fff',
            fontSize: 20,
            fontWeight: '400'
          }
        },
        tooltip: {
          show: false,
        },
        legend: {
          orient: "horizontal",
          x: "20",
          y: "center",
          itemHeight: 10,
          itemWidth: 14,
          itemGap: 25,
          show: true,
          textStyle: {
            color: "#fff",
          }
        },
        toolbox: {
          show: false,
        },
        series: seriesObj,
      };
      option && myChart.setOption(option);
    },
  },
};
</script>
